<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/moren.css">
    <link rel="stylesheet" href="./css/common.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="searchbox">
            <div class="search_conter_logo">
                <a href="yemian1.html"><img src="./首页/LOGO.png"/></a>
            </div>
            <div class="search_conter">
                <input type="text" class=" shuru" value="请输入商品名称"
                 style="border-radius: 50vw 50vw ;
                border: solid 2px #ff9344;">
                
            </div>
            <div class="search_conter">
                <select class="xiala"
                 style="border: solid 2px #ff9344;
                 ">
                    <option value="volvo">广州市</option>
                    
                  </select>
            </div>
        </div>
    </header>
    <!-- 头部 -->
    <main>
        <div class="classification_picture">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide a">
                        <div class="tu_neirong"><img src="./首页/图层1.png" alt=""></div>
                       
                    </div>
                    <div class="swiper-slide b">
                        <div class="tu_neirong"><img src="./产品详情/图层5.png" alt=""></div>
                    </div>
                    <div class="swiper-slide c">
                        <div class="tu_neirong"><img src="./首页/图层1.png" alt=""></div>
                    </div>
                    <div class="swiper-slide c">
                        <div class="tu_neirong"><img src="./产品详情/图层5.png" alt=""></div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <!-- <div class="swiper-pagination"></div> -->
                
                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
                
                如果需要滚动条
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="discount_buying">
            <div class="discount_content_1">
            <div class="dc_ct">
                <img src="./首页/团购.png" />
                <span>优惠团购</span>
            </div>
            <div class="dc_ct_2">
                
                <span>更多</span>
                <img src="./首页/更多.png" />
            </div>
            </div>
            <div class="discount_conten_2t">
                <img src="./首页/图层5.png">
                <img src="./首页/图层6.png" >
                <img src="./首页/图层7.png" >
                <img src="./首页/图层8.png">
            </div>
        </div>
        <!-- 优惠团购部分 -->
        <div class="discount_buying_2">
            <div class="dc_3"><img src="./首页/形状5.png" alt=""><span>猜你喜欢</span></div>
            <div class="dc_4"><span>更多</span><img src="./首页/更多.png" alt=""></div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="gundong">
        <div class="shop_bottom">
            <div class="shop_logo">
                <img src="./首页/图层3.png" alt="">
            </div>
            <div class="shop_text">
                <div class="text_center">
                    <div class="text_information_1"><span>万岁寿司（正佳店）</span></div>
                    <div class="text_information"><p> ＜100m </p></div>
                </div>
                <div class="text_center">
                    <div class="text_information"><p> [100店通用] 双人套餐</p></div>
                </div>
                <div class="text_center">
                    <div class="text_information_2">
                        <span style="font-size: vw(32);                        
                        color: #ff9344;">￥88.00</span>
                    </div>
                    <div class="text_information"><p >已售1000</p></div>
                </div>
            </div>
        </div>
            <!-- 第一部分店铺 -->
            <div class="shop_bottom">
                <div class="shop_logo">
                    <img src="./首页/图层4.png" alt="">
                </div>
                <div class="shop_text">
                    <div class="text_center">
                        <div class="text_information_1"><span>万岁寿司（正佳店）</span></div>
                        <div class="text_information"><p> ＜100m </p></div>
                    </div>
                    <div class="text_center">
                        <div class="text_information"><p> [100店通用] 双人套餐</p></div>
                    </div>
                    <div class="text_center">
                        <div class="text_information_2">
                            <span style="font-size: vw(32);                        
                            color: #ff9344;">￥88.00</span>
                        </div>
                        <div class="text_information"><p >已售1000</p></div>
                    </div>
                </div>
                
            </div>
            <!-- 第二部分店铺 -->
            <div class="shop_bottom">
                <div class="shop_logo">
                    <img src="./首页/图层3.png" alt="">
                </div>
                <div class="shop_text">
                    <div class="text_center">
                        <div class="text_information_1"><span>万岁寿司（正佳店）</span></div>
                        <div class="text_information"><p> ＜100m </p></div>
                    </div>
                    <div class="text_center">
                        <div class="text_information"><p> [100店通用] 双人套餐</p></div>
                    </div>
                    <div class="text_center">
                        <div class="text_information_2">
                            <span style="font-size: vw(32);                        
                            color: #ff9344;">￥88.00</span>
                        </div>
                        <div class="text_information"><p >已售1000</p></div>
                    </div>
                </div>
                
            </div>
            <!-- 第三部分店铺  -->
            <div class="shop_bottom">
                <div class="shop_logo">
                    <img src="./首页/图层4.png" alt="">
                </div>
                <div class="shop_text">
                    <div class="text_center">
                        <div class="text_information_1"><span>万岁寿司（正佳店）</span></div>
                        <div class="text_information"><p> ＜100m </p></div>
                    </div>
                    <div class="text_center">
                        <div class="text_information"><p> [100店通用] 双人套餐</p></div>
                    </div>
                    <div class="text_center">
                        <div class="text_information_2">
                            <span style="font-size: vw(32);                        
                            color: #ff9344;">￥88.00</span>
                        </div>
                        <div class="text_information"><p >已售1000</p></div>
                    </div>
                </div>
                
            </div>
            <!-- 第四部分店铺  -->
        </div>
        
    </main>

    <footer>
        <div class="bottom_classification">
            <div class="classification_center"><a href="yemian1.html"><img src="./首页.png" alt=""></a>首页</div>
            <div class="classification_center"><a href="yemian2.html"><img src="./分类4.png" alt=""></a>分类</div>
            <div class="classification_center"><a href="yemian3.html"><img src="./形状7副本.png" alt=""></a>发现</div>
            <div class="classification_center"><a href="yemian5.html"><img src="./我的.png" alt=""></a>我的</div>
        </div>
    </footer>
    <!-- 脚部 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
          direction: 'horizontal',
          loop: true,
          autoplay : 2000,
          effect : 'flip',
          // 如果需要分页器
          pagination: '.swiper-pagination',
          
          // 如果需要前进后退按钮
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          
          
          // 如果需要滚动条
        //   scrollbar: '.swiper-scrollbar',
        })        
        </script>
</body>
</html>